<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" th:href="@{/jquery-ui-1.12.1/jquery-ui.css}"/>
<script type="text/javascript"  th:src="@{/jquery-3.5.1/jquery-3.5.1.js}"></script>
<script type="text/javascript"  th:src="@{/jquery-ui-1.12.1/jquery-ui.js}"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
    .ui-progressbar {
        position: relative;
    }
    .progress-label {
        position: absolute;
        left: 50%;
        font-weight: bold;
        text-shadow: 1px 1px 0 #fff;
    }
    button{
        width: 120px;
        height: 64px;
        font-size: 24px;
    }
</style>
<script>
    $(function() {
        var progressbar = $( "#progressbar" ),
            progressLabel = $( ".progress-label" );

        progressbar.progressbar({
            value: false,
            change: function() {
                progressLabel.text( progressbar.progressbar( "value" ) + "%" );
            },
            complete: function() {
                progressLabel.text( "购票成功！" );
                document.form1.submit();
            }
        });

        function progress() {
            var val = progressbar.progressbar( "value" ) || 0;

            progressbar.progressbar( "value", val + 1 );

            if ( val < 99 ) {
                setTimeout( progress, 50 );
            }
        }
        setTimeout( progress, 3000 );
    });
</script>
<body>
<div>
    <form method="post" th:action="@{/tickets}" name="form1">
    <table align="center">
        <tr>
            <input type="hidden" id="car1" name="car1" th:value="${Forms.getTickets()[0].car}">
            <input type="hidden" id="car2" name="car2" th:value="${Forms.getTickets()[1].car}">
            <input type="hidden" id="departure1" name="departure1" th:value="${Forms.getTickets()[0].departure}">
            <input type="hidden" id="departure2" name="departure2" th:value="${Forms.getTickets()[1].departure}">
            <input type="hidden" id="destination1" name="destination1" th:value="${Forms.getTickets()[0].destination}">
            <input type="hidden" id="destination2" name="destination2" th:value="${Forms.getTickets()[1].destination}">
            <input type="hidden" id="Date" name="Date" th:value="${Forms.getTickets()[0].Dtime}">
            <input type="hidden" id="Htimea1" name="Htimea1" th:value="${Forms.getTickets()[0].Htimea}">
            <input type="hidden" id="Htimea2" name="Htimea2" th:value="${Forms.getTickets()[1].Htimea}">
            <input type="hidden" id="Htimeb1" name="Htimeb1" th:value="${Forms.getTickets()[0].Htimeb}">
            <input type="hidden" id="Htimeb2" name="Htimeb2" th:value="${Forms.getTickets()[1].Htimeb}">
            <input type="hidden" id="polla" name="polla" th:value="${Forms.getTickets()[0].poll}">
            <input type="hidden" id="pollb" name="pollb" th:value="${Forms.getTickets()[1].poll}">
            <input type="hidden" id="classify" name="classify" th:value="${Forms.classify}">
            <input type="hidden" id="mon" name="mon" th:value="${Forms.getTickets()[0].money}">
            <input type="hidden" id="Money" name="Money" th:value="${Forms.Mon}"/>
            <input type="hidden" id="phone" name="phone" th:value="${Forms.phone}"/>
        </tr>
        <tr>
            <div id="progressbar"><div class="progress-label" id="barlabel" >购票中...</div></div>
        </tr>
        <tr>
            <td><input type="button" id="back" name="back" value="取消" onclick="javascript:history.back(-1);"/></td>
        </tr>
    </table>
    </form>
</div>
</body>
</html>